import { saveInit, saveRecord } from '@/services/api/api-assess-week-collect-article-record';
import { CheckCircleOutlined, CheckCircleTwoTone } from '@ant-design/icons';
import { ModalForm, ProFormDigit, ProFormGroup, ProFormSelect } from '@ant-design/pro-components';
import { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import { Alert, Button, Divider, message, Spin } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';

interface AddArticleRecordProps {
  onRefurbish: () => void;
}

const AddArticleRecord: React.FC<AddArticleRecordProps> = ({ onRefurbish }) => {
  const access = useAccess();

  const formRef = useRef<ProFormInstance>();

  /**
   * 提交窗口
   */
  const [modalFormOpen, setModalFormOpenState] = useState<boolean>(false);

  const [saveInitData, setSaveInitDataState] = useState<AssessWeekCollectArticleRecordData.SaveInit>();

  /**
   * 加载来源详情
   * @param key
   */
  const loadSaveInit = async () => {
    try {
      const response = await saveInit();
      if (response.code === 0) {
        setSaveInitDataState(response.data);
      }
    } catch (error) {}
  };

  return (
    <DrawerForm
      key="add_assess_collect_record_drawer_form"
      title={'添加信息汇总'}
      drawerProps={{
        width: 600,
        maskClosable: false,
        destroyOnClose: true,
      }}
      layout="horizontal"
      formRef={formRef}
      trigger={<Button type="primary">添加信息汇总</Button>}
      initialValues={{}}
      onOpenChange={(visible) => {
        if (visible) {
          loadSaveInit();
        }
      }}
      submitter={{
        submitButtonProps: {
          style: {
            display: 'none',
          },
        },
        render: (props, defaultDoms) => {
          return [
            ...defaultDoms,
            <Button
              key="button_release_state_discard"
              icon={<CheckCircleOutlined />}
              type="primary"
              style={{
                background: '#87d068',
              }}
              onClick={() => {
                setModalFormOpenState(true);
              }}
            >
              提交
            </Button>,
            <ModalForm
              key={'modal_form_release_state_discard'}
              title={
                <>
                  <CheckCircleTwoTone
                    style={{
                      marginRight: 8,
                    }}
                    twoToneColor="#87d068"
                  />
                  确认提交
                </>
              }
              autoFocusFirstInput
              modalProps={{
                width: 400,
                destroyOnClose: true,
                onCancel: () => console.log('run'),
              }}
              open={modalFormOpen}
              onOpenChange={setModalFormOpenState}
              submitTimeout={2000}
              submitter={{
                submitButtonProps: {
                  type: 'primary',
                  style: { background: '#87d068' },
                },
              }}
              onFinish={async (values) => {
                props.submit();
                return true;
              }}
            />,
          ];
        },
      }}
      onFinish={async (values) => {
        const response = await saveRecord({
          ...values,
        });

        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
          return true;
        } else {
          return false;
        }
      }}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={saveInitData === undefined}
      >
        <Alert
          message="信息汇总说明"
          type="warning"
          showIcon
          style={{
            marginBottom: '18px',
          }}
        />
        <ProFormSelect
          name="rangeId"
          label="选择范围"
          options={saveInitData?.ranges?.map((item) => {
            return { value: item.id, label: `${item.startDate} - ${item.endDate}` };
          })}
          rules={[{ required: true, message: '请选择报送范围' }]}
        />
        <Divider
          orientation="left"
          style={{
            fontSize: 14,
            fontWeight: 'bold',
          }}
        >
          填报发稿数据
        </Divider>
        <ProFormGroup>
          <ProFormDigit
            label={
              <span
                style={{
                  paddingRight: 18,
                }}
              >
                发稿总量（包括以下所有数据）
              </span>
            }
            name="totalCount"
            width="xs"
            min={0}
            max={9999999}
            rules={[{ required: true, message: '请输入发稿总量' }]}
          />
        </ProFormGroup>
        <ProFormGroup>
          <ProFormDigit
            label={
              <span
                style={{
                  paddingRight: 18,
                }}
              >
                阅读过万
              </span>
            }
            name="count10000"
            width="xs"
            min={0}
            max={9999999}
            rules={[{ required: true, message: '请输入阅读过万的数量' }]}
          />
        </ProFormGroup>
        <ProFormGroup>
          <ProFormDigit
            label={
              <span
                style={{
                  paddingRight: 4,
                }}
              >
                阅读过十万
              </span>
            }
            name="count100000"
            width="xs"
            min={0}
            max={9999999}
            rules={[{ required: true, message: '请输入阅读过十万的数量' }]}
          />
          <ProFormDigit
            label={
              <span
                style={{
                  paddingRight: 4,
                }}
              >
                阅读过百万
              </span>
            }
            name="count1000000"
            width="xs"
            min={0}
            max={9999999}
            rules={[{ required: true, message: '请输入阅读过百万的数量' }]}
          />
        </ProFormGroup>
        <ProFormGroup>
          <ProFormDigit
            label={
              <span
                style={{
                  paddingRight: 4,
                }}
              >
                阅读过千万
              </span>
            }
            name="count10000000"
            width="xs"
            min={0}
            max={9999999}
            rules={[{ required: true, message: '请输入阅读过千万的数量' }]}
          />
          <ProFormDigit
            label={
              <span
                style={{
                  paddingRight: 18,
                }}
              >
                阅读过亿
              </span>
            }
            name="count100000000"
            width="xs"
            min={0}
            max={9999999}
            rules={[{ required: true, message: '请输入阅读过亿的数量' }]}
          />
        </ProFormGroup>
        {/* <ProTable
          columns={[
            {
              title: (
                <span
                  style={{
                    color: '#99a3b7',
                    fontSize: 12,
                    textAlign: 'center',
                    fontWeight: 'normal',
                  }}
                >
                  标题
                </span>
              ),
              dataIndex: 'title',
              align: 'center',
              width: '80%',
              readonly: true,
              editable: false,
            },
            {
              title: (
                <span
                  style={{
                    color: '#99a3b7',
                    fontSize: 12,
                    textAlign: 'center',
                    fontWeight: 'normal',
                  }}
                >
                  操作
                </span>
              ),
              valueType: 'option',
              width: 80,
              render: (text, record, _, action) => [
                <a
                  hidden={record.isEdit == 0}
                  key="editable"
                  onClick={() => {
                    action?.startEditable?.(record.id);
                  }}
                >
                  编辑
                </a>,
              ],
            },
          ]}
          ghost
          rowKey="id"
          search={false}
          headerTitle={
            <span
              style={{
                fontSize: 14,
                fontWeight: 'bold',
              }}
            >
              阅读过千万
            </span>
          }
          toolBarRender={() => {
            return [
              <Button key="3" type="primary" size="small">
                新增
              </Button>,
            ];
          }}
          pagination={false}
          options={{
            density: false,
            setting: false,
          }}
        />
        <Divider
          orientation="left"
          style={{
            fontSize: 14,
            fontWeight: 'bold',
          }}
        >
          阅读过亿
        </Divider> */}
        {/* <Divider
          orientation="left"
          style={{
            fontSize: 14,
            fontWeight: 'bold',
          }}
        >
          填报应用下载数据
        </Divider>
        <ProFormGroup>
          <ProFormDigit
            label={
              <span
                style={{
                  paddingRight: 4,
                }}
              >
                下载量（单位：次）
              </span>
            }
            name="countAppDownload"
            width="md"
            min={0}
            max={999999999}
            rules={[{ required: true, message: '请输入下载量（单位：次）' }]}
          />
        </ProFormGroup> */}
      </Spin>
    </DrawerForm>
  );
};

export default AddArticleRecord;
